<template>
  <div class="page-content">
    <el-row :gutter="20">
      <!-- <el-col :xs="24" :sm="12" :lg="4">
        <el-input placeholder="用户名或昵称"></el-input>
      </el-col> -->
      <el-col :xs="24" :sm="12" :lg="4" class="el-col2">
        <!-- <el-button>搜索</el-button> -->
        <el-button @click="showDialog('add', '')">新增角色</el-button>
      </el-col>
    </el-row>

    <tao-table
      style="margin-top: 15px"
      :data="roleList"
      v-bind:page="page"
      :showPage="true"
    >
      <el-table-column label="角色名称" prop="name" />
      <el-table-column label="拥有权限" prop="rules" />
      <el-table-column label="描述" prop="remark" />
      <el-table-column label="创建时间" prop="add_time" />
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            @click="modifyRoleStatus(scope.row)"
            :type="scope.row.status ? 'success' : 'danger'"
          >
            {{ scope.row.status ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showDialog('edit', scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            style="color: #fa6962"
            icon="el-icon-delete"
            @click="deleteRole(scope)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </tao-table>

    <el-dialog :title="dialogTitle" width="500px" :visible.sync="dvEdit">
      <el-form ref="form" :model="form" :rules="rules" label-width="70px">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="remark">
          <el-input type="textarea" :rows="3" v-model="form.remark" />
        </el-form-item>
        <el-form-item label="权限：">
          <el-tree
            :data="menuList"
            show-checkbox
            node-key="id"
            :default-checked-keys="checked_keys"
            :props="defaultProps"
            @check="
              (click, checked) => {
                handleCheckChange2(click, checked);
              }
            "
          >
          </el-tree>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dvEdit = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleList,
  editRole,
  deleteRole,
  modifyRole,
} from "@/api/roleApi.js";
import { getAllMenuTree } from "@/api/menuApi.js";
export default {
  data() {
    return {
      roleList: [],
      menuList: [],
      dvEdit: false,
      dialogTitle: "",
      form: {
        name: "",
        remark: "",
        rules: "",
      },
      rules: {
        name: [
          { required: true, message: "请填写角色名称", trigger: "blur" },
          //{ min: 3, max: 64, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      page: {
        total: 0,
        page: 1,
        pagesize: 15,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      checked_keys: [],
    };
  },
  created() {
    getRoleList(this.page).then((res) => {
      if (res.code == 0) {
        this.roleList = res.data.data;
        this.page.total = res.data.count;
      }
    });
  },
  mounted() {},
  methods: {
    showDialog(type, row) {
      this.dvEdit = true;
      this.dialogTitle = type === "add" ? "新增角色" : "编辑角色";
      //获取所有角色
      getAllMenuTree().then((res) => {
        if (res.code == 0) {
          this.menuList = res.data;
        }
      });
      if (type === "edit") {
        console.log(row);
        //初始化值
        this.checked_keys = [];
        //赋值
        if (row.rules) {
          var checked_keys_str = row.rules;
          var checked_keys_arr = checked_keys_str.split(",");
          this.checked_keys = checked_keys_arr;
        }
        this.form = row;
      }
    },
    changePage(page, limit) {
      this.page.page = page;
      this.page.pageSize = limit;
      getRoleList(this.page).then((res) => {
        if (res.code == 0) {
          this.roleList = res.data.data;
          this.page.total = res.data.count;
        }
      });
    },
    modifyRoleStatus(row) {
      if (row.status == 0) {
        row.status = 1;
      } else {
        row.status = 0;
      }
      var obj = {};
      obj.field = "status";
      obj.value = row.status;
      obj.id = row.id;
      modifyRole(obj).then((res) => {});
    },
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.dvEdit = false;
          editRole(this.form).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              getRoleList(this.page).then((res) => {
                if (res.code == 0) {
                  this.roleList = res.data.data;
                  this.page.total = res.data.count;
                }
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    // 获取选择的节点数组
    handleCheckChange2(click, checked) {
      this.checked_keys = checked.checkedKeys;
      this.form.rules = checked.checkedKeys.toString();
    },
    handleNodeClick(data) {
      // console.log(data);
    },
    deleteRole(scope) {
      this.$confirm("您确定要删除当前角色吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          deleteRole({ id: scope.row.id }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.roleList.splice(scope.$index, 1);
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
}
</style>
